<template>
	<BasicDrawer v-model:show="showModal" title="分配权限" :width="'80%'">
		<n-tabs v-model:value="activeTabName" class="card-tabs" default-value="signin" size="small" animated pane-wrapper-style="margin: 0 -4px"
			pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;" @update:value="switchTab">
			<n-tab-pane name="front" tab="前台菜单权限">
				<BasicTable ref="basicTable" :title="'分配权限'" :columns="columns" default-expand-all :row-key="rowKey" :loading="backLoading"
					:tableData="frontTableData" :pagination="{show:false}">
				</BasicTable>
			</n-tab-pane>
			<n-tab-pane name="back" tab="后台菜单权限">
				<BasicTable ref="basicTable" :title="'分配权限'" :columns="columns" default-expand-all :row-key="rowKey" :loading="backLoading"
					:tableData="backTableData" :pagination="{show:false}">
				</BasicTable>
			</n-tab-pane>
		</n-tabs>
		<template v-slot:footer>
			<n-button @click="handleCancel">取消</n-button>
			<n-button class="ml-10" @click="handleConfirm" type="primary">确定</n-button>
		</template>
	</BasicDrawer>
</template>

<script setup lang="ts">
	import { ref, defineExpose,onMounted } from 'vue'
	import { useMessage, NButton, NCheckboxGroup, NSpace, NCheckbox } from 'naive-ui'
	import type { DataTableColumns } from 'naive-ui'
	import { BasicTable } from "@/components/Common/BasicTable"
	import { BasicDrawer } from "@/components/Common/BasicDrawer"
	import { getRoleMenuTree, saveRoleMenu } from '@/api/system'
	import _ from "lodash-es"
	const message = useMessage()
	type RowData = {
		menu_name : string
		id : string
		children : RowData[]
	}
	// const checkedPermissions = ref<(string | number)[] | null>(null)
	const columns : DataTableColumns<RowData> = [
		{
			title: '菜单名称',
			key: 'menu_name',
			width: 300
		},
		{
			title: '操作',
			key: 'actions',
			render(row) {
				const authCheckbox = row.auth.map(item => {
					return h(NCheckbox, { value: item.id, label: item.menu_name }, { default: () => item.menu_name })
				})
				return h(
					NCheckboxGroup,
					{
						value: row.checkedPermissions,
						onUpdateValue(v : (string | number)[]) {
							row.checkedPermissions = v
						}
					},
					()=>h(
						NSpace,
						{
							itemStyle: { display: 'flex' }
						},
						()=>authCheckbox
					)
				)
			}
		}
	]
	const rowKey = (row : RowData) => row.id
	const showModal = ref(false)
	const activeTabName = ref<string>()
	const backTableData = ref<Array<Object>>([])
	const frontTableData = ref<Array<Object>>([])
	const roleId = ref<string>()
	/**
	 * @param {Object} row
	 * 打开弹窗
	 */
	function open(row) {
		showModal.value = true
		activeTabName.value = 'front'
		roleId.value = row.id
		switchTab()
	}
	function handleCancel() {
		showModal.value = false
	}
	function duplicate(n:any) {
		const tempArr:Array<Object> = []
		function deepItem(n:any){
			if(n instanceof Object){
				tempArr.push(n)
				for(const item in n.children){
					deepItem(n.children[item])
				}
			}
		}
		deepItem(n)
		return tempArr
	}
	function getPermission(tableData : Array<Object>) {
		const newTableData = _.flatMapDeep(tableData, duplicate);
		let permissions = newTableData.map(item => item.checkedPermissions).filter(item => !!item)
		permissions = _.flattenDeep(permissions);
		return permissions
	}
	/**
	 * 保存
	 */
	function handleConfirm() {
		let permissions:Array<Object> = []
		if(activeTabName.value === 'front'){
			permissions = getPermission(frontTableData.value)
		}else{
			permissions = getPermission(backTableData.value)
		}
		saveRoleMenu({ roleId: roleId.value, permissions,menuType: activeTabName.value === 'front'?2:4 }).then(() => {
			message.success('保存成功')
			showModal.value = false
		})

	}
	const backLoading = ref<Boolean>(false)
	function switchTab(){
		backLoading.value = true
		const menuType = activeTabName.value === 'front'?1:3
		getRoleMenuTree({menuType,roleId:roleId.value}).then(res => {
			const {data} = res;
			if(activeTabName.value === 'front'){
				frontTableData.value = data;
			}else{
				backTableData.value = data;
			}
			backLoading.value = false
		})
	}
	defineExpose({
		open
	})
</script>

<style>
</style>